<template>
  <div class="app-container">
    <!-- 首页第一排：用户详情 我的培训 我的课程 我的必修 -->
    <div class="first_floor">
      <el-row>
        <el-col :span="5">
          <el-card class="personalInfo" style="margin-top: 40px" shadow="hover"> 
            <div class="demo-basic--circle">
              <div class="block"><br>
                <el-avatar :size="110" :src="circleUrl"></el-avatar>
              </div>
              <div class="info" v-text="name" style="margin-top: 10px"></div>
              <br />
              <div class="dept">
                {{ dept }}<el-divider direction="vertical"></el-divider>{{ position }}
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="myItem" shadow="hover" style="margin-top: 40px">
            <div >
              <br><br>
              <el-link type="primary" @click="goMyItem"><span style="font-size: 40px">{{ itemNum }}</span>&#8195;<span style="font-size: 13px Small">门</span></el-link>
            </div>
            <div style="text-align: right; margin-top: 70px; margin-right: 10px">
              我的培训
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="myCourse" shadow="hover" style="margin-top: 40px">
            <div ><br><br>
              <el-link type="primary" @click="goMyRequired"><span style="font-size: 40px">{{requiredNum}}</span>&#8195;<span style="font-size: 13px Small">门</span></el-link>
            </div>
            <div style="text-align: right;margin-top: 70px; margin-right: 10px">
              我的必修
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="myrequired" shadow="hover" style="margin-top: 40px">
            <div  ><br><br>
              <el-link type="primary" @click="goMyElective"><span style="font-size: 40px">{{electiveNum}}</span>&#8195;<span style="font-size: 13px Small">门</span></el-link>
            </div>
            <div style="text-align: right; margin-top: 70px; margin-right: 10px">
              我的选修
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- <img src="../../static/img/3.jpg"> -->
    </div>
    <!-- 第二排:进行中的培训和课程 -->
    <div class="two_floor">
      <div>
        <el-row>
          <el-col :span="24">
            <div class="mycouresAndmyitem" style="width:70%;margin-left:170px">
              <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="(item) in coursList.slice(0,2)" :key="item.index" :label="item.courseTitle">
                  <h3 class="medium"><img :src="item.courseCover" width="100%" @click="goCoursePage(item.courseId)"></h3> 
                </el-carousel-item>
                <el-carousel-item v-for="(item) in itemList.slice(0,2)" :key="item.index" :label="item.trainTitle">
                  <h3 class="medium"><img :src="item.trainCover" width="100%" @click="goItemPage(item.itemId)" ></h3> 
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-card style="margin-top:40px" class="three_floor" shadow="hover">  
      <el-row :gutter="40">
        <el-col :span="5">
          <div class="radarModel"><img src="../static/主页/555.jpg" width="100%"></div>
        </el-col>
        <el-col :span="19">
          <div style="margin-top:10px">
            <el-col   :span="8" v-for="(model) in model_list.data" :key="model.index">
              {{model.abilityName}}<br><br> 
                <div class="myability" v-for="(ability) in model.childAbilityList" :key="ability.index">
                  <span style="font-size:12px">{{ability.abilityName}}:{{"\xa0\xa0"}}</span>
                  <span>
                    <el-progress :text-inside="true" :stroke-width="15" :percentage="ability.score" :show-text="show">
                    </el-progress>
                  </span><br>
              </div>

            </el-col>
          </div>
        </el-col>
      </el-row>

    </el-card>>
  </div>
</template>

<script>

import {findAmById} from '@/api/user'
import {findMyRequiredSum} from '@/api/user'
import {findMyElectiveSum} from '@/api/user'
import {findMyItemSum} from '@/api/user'
import {findUserById} from '@/api/user'
import {findCourseAndItem} from '@/api/user'

  export default {
    data() {
      return {
         /* loading加载 */
        loading:this.$loading({
            lock: true,
            text: "数据加载中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
      }),
        userId:this.$store.getters.userId,
        show: true,
        name: "小奇遇",
        position: "总经理",
        dept: "人力资源部",
        itemNum: 0,
        electiveNum: 0,
        requiredNum: 0,
        coursList: [{
            url: require("../../static/img/1.jpg"),
            name:1
          },
          {
            url: require("../../static/img/2.jpg"),
            name:1
          },
          {
            url: require("../../static/img/3.jpg"),
            name:1
          },
          {
            url: require("../../static/img/4.jpg"),
            name:1
          },
          {
            url: require("../../static/img/5.jpg"),
            name:1
          }
        ],
        itemList:[],
        circleUrl: require("../../static/img/cat.png"),
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        data1:[{
            "abilityId": 1,
            "abilityName": "⾃我成⻓",
            "abilityFatherId": 0,
            "childAbilityList": [{
                "abilityId": 2,
                "abilityName": "追求卓越",
                "abilityFatherId": 1,
                "score": 0,

              },
              {
                "abilityId": 3,
                "abilityName": "抗压能⼒",
                "abilityFatherId": 1,
                "score": 0,

              },
              {
                "abilityId": 4,
                "abilityName": "学习能⼒",
                "abilityFatherId": 1,
                "score": 0,

              },
              {
                "abilityId": 5,
                "abilityName": "积极主动",
                "abilityFatherId": 1,
                "score": 0,
              }
            ],
          }, {
            "abilityId": 1,
            "abilityName": "人际交往",
            "abilityFatherId": 0,
            "childAbilityList": [{
                "abilityId": 2,
                "abilityName": "沟通能力",
                "abilityFatherId": 1,
                "score": 0,

              },
              {
                "abilityId": 3,
                "abilityName": "团队合作",
                "abilityFatherId": 1,
                "score": 0,

              },
              {
                "abilityId": 4,
                "abilityName": "协作能力",
                "abilityFatherId": 1,
                "score": 0,

              },
              {
                "abilityId": 5,
                "abilityName": "影响说服",
                "abilityFatherId": 1,
                "score": 0,
              }
            ],
          }, {
            "abilityId": 1,
            "abilityName": "决策执行",
            "abilityFatherId": 0,
            "childAbilityList": [{
                "abilityId": 2,
                "abilityName": "决策判断",
                "abilityFatherId": 1,
                "score": 0,

              },
              {
                "abilityId": 3,
                "abilityName": "高效执行",
                "abilityFatherId": 1,
                "score": 0,

              },
              {
                "abilityId": 4,
                "abilityName": "规划安排",
                "abilityFatherId": 1,
                "score": 0,

              },
              {
                "abilityId": 5,
                "abilityName": "认真负责",
                "abilityFatherId": 1,
                "score": 0,
              }
            ],
          }, ],
        model_list: {
          data: []
        }

      };
    },
    created(){
        /* alert(this.$store.getters.userId) */
        this.showMyInfo()
        this.showAbilityModel()
        this.showItemNum()
        this.showRequiredNum()
        this.showElectiveNum()
        this.showItemACourse()
    },
    methods: {
      /* 展示用户名字 */
      showMyInfo(){
        findUserById(this.userId).then(res =>{
          this.name = res.data.userName
          this.dept = res.data.dept.deptName
          this.position = res.data.userPosition
          this.circleUrl = res.data.userHeadImg
          console.log(res);
          this.loading.close()
        })
      },
      /* 展示我的培训数量 */
      showItemNum(){
        findMyItemSum(this.userId).then(res =>{
          console.log(res.data);
          this.itemNum = res.data
        })
      },
      /* 展示我的必修数量 */
      showRequiredNum(){
        findMyRequiredSum(this.userId).then(res =>{
          this.requiredNum = res.data
        })
      },
      /* 展示我的选修数量 */
      showElectiveNum(){
        findMyElectiveSum(this.userId).then(res =>{
          this.electiveNum = res.data
        })
      },
      /* 展示我的前几个课程或者培训页面 */
      showItemACourse(){
        findCourseAndItem(this.userId).then(res =>{
          console.log(res);
          this.coursList = res.data.etmsCourseList
          this.itemList = res.data.etmsItemList
        })
      },
      /* 展示能力模型 */
      showAbilityModel(){
        findAmById(this.userId).then(res =>{
            console.log(res);
            console.log(res.data.length == 0);
            if(res.data.length == 0){
              this.model_list.data = this.data1
            }else{
              this.model_list.data = res.data
            }
            
        })
      },
      onSubmit() {
        this.$message("submit!");
      },
      onCancel() {
        this.$message({
          message: "cancel!",
          type: "warning",
        });
      },
      /* 去我的培训 */
      goMyItem(){
        this.$router.push({
          name:'MyTrain'
        })
      },
      /* 去我的必修 */
      goMyRequired(){
        this.$router.push({
          name:'MyRequired'
        })
      },
      /* 去我的选修 */
      goMyElective(){
        this.$router.push({
          name:'MyElective'
        })
      },
      /* 去课程页面 */
      goCoursePage(courseId){
        this.$router.push({
        name:'coursePage',
        query:{
          courseId : courseId
          }
        })
      },
      /* 去培训课程页面 */
       goItemPage(itemId){
        this.$router.push({
        name:'trainDetails',
        query:{
          userId: this.userId,
          itemId : itemId
          }
        })
      },
      
    },
  };

</script>

<style scoped>
  * {
    font-family: "微软雅黑 Light";
  }

  .personalInfo {
    text-align: center;
    border-radius: 4px;
    height: 15em;
    margin-left: 10px;
  }

  .myItem {
    width: 80%;
    text-align: center;
    border-radius: 4px;
    height: 15em;
    margin-left: 40px;
    /* background: rgb(98, 140, 196); */
    background-image:url(../static/主页/20.jpg) ;
    background-size: cover;
  }

  .myCourse {
    width: 80%;
    text-align: center;
    border-radius: 4px;
    height: 15em;
    margin-left: 25px;
    background-image:url(../static/主页/21.png) ;
    background-size: cover;
    /* background: rgb(148, 105, 135); */
  }

  .myrequired {
    width: 80%;
    text-align: center;
    border-radius: 4px;
    height: 15em; 
    margin-left: 15px;
    background-image:url(../static/主页/22.png) ;
    background-size: cover;
    /* background: rgba(248, 131, 14, 0.575); */
  }

  .mycouresAndmyitem {
    text-align: center;
   /*  border: solid cadetblue 1px; */
    border-radius: 4px;
    height: 13em;
    margin-top: 35px;
    margin-left: 15px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .myability {
    margin-top: 15px;
    display: flex;
    /* flex-wrap: nowrap; */

  }

  img {
    /*设置图片宽度和浏览器宽度一致*/
    /* width: 100%; */
    height: inherit;
  }

  .three_floor {
    text-align: center;
    border-radius: 4px;
    height: 15em;
    margin-top: 10px;
    margin-left: 15px;
  }
  

</style>

<style lang="scss">
  .el-progress{
    width: 210px;
  }
</style>
